<template>
  <div class="app-container">
    <div v-for="course in courseList" :key="course.id" style="width: 100%;">
      <order-item :course="course" />
    </div>
    <div v-if="courseList.length === 0" style="text-align: center">
      暂无订单信息
    </div>
    <!--分页插件-->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getOrderList"
    />

  </div>
</template>

<script>
import { parseTime } from '@/utils'
import { getOrderPageByStudent } from '@/api/order'
import Pagination from '@/components/Pagination'
import OrderItem from './component/OrderItem'

export default {
  name: 'MyOrder',
  components: { Pagination, OrderItem },
  data() {
    return {
      courseList: [],
      // 总数
      total: 0,
      // 表格渲染标志
      listLoading: true,
      // 查询对象
      listQuery: {
        current: 1,
        size: 10
      }
    }
  },
  created() {
    this.getOrderList()
  },
  methods: {
    parseTime(time, format) {
      return parseTime(time, format)
    },
    getOrderList() {
      // 开启加载渲染
      this.listLoading = true
      getOrderPageByStudent(this.listQuery).then(res => {
        this.courseList = res.data.records
        this.total = res.data.total
        // console.log(this.courseList)
        // 关闭加载渲染
        this.listLoading = false
      }).catch(() => {
        // 关闭加载渲染
        this.listLoading = false
      })
    }
  }
}
</script>

<style scoped>
.pagination-container {
  background-color: #F4F4F4;
  text-align: center;
}
</style>
